<template>
    <framework>
        <template #header>
            <Nav />
        </template>
        <template #module>
            <sidebar @module="selectedModule" v-show="loadOk" :onAddItem="onAddItem" />
        </template>
        <template #left>
            <resource />
        </template>
        <template #workspace>
            <Workspace v-if="loadOk" ref="workspace">
                <template #canvas>
                    <Canvas
                        :workareaOption="workareaOption"
                        ref="canvasRef"
                        :objectOption="defaultOption"
                        :onAdd="onAdd"
                        :init="init"
                        :onSelect="onSelect"
                    />
                </template>
            </Workspace>
            <atom-spinner
                :animation-duration="1000"
                :size="60"
                color="#2254f4"
                class="spinner"
                v-else
            />
        </template>
        <template #propsPanel>
            <panel :onChange="onChange" />
        </template>
    </framework>
    <!-- <Recorder /> -->
</template>
<script setup>
// import Player from '@/common/Player.vue'
// import Recorder from '@/common/Recorder.vue'
import Framework from '../layout/Framework.vue'
import Sidebar from '../components/sidebar/bar.vue'
import Resource from '../components/sidebar/resource.vue'
import Workspace from '../components/workarea/workspace.vue'
import Panel from '../components/panel/index.vue'
import Nav from '@/layout/Nav.vue'
import { v4 as uuidv4 } from 'uuid'
import Canvas from '@/components/workarea/canvas.vue'
import { workareaOption } from '@/constants/workspace'
import { ref, onMounted, provide, computed, watch, nextTick } from 'vue'
import { AtomSpinner } from 'epic-spinners'
import { useStore } from 'vuex'
const { dispatch, state, commit } = useStore()
const canvasRef = ref()
const handler = ref()
const workspace = ref() // 操作区dom
const defaultOption = ref({ filters: [] })
const canvas = ref() // 画布fabric对象
provide('handler', handler)
provide('canvas', canvas)
const loadOk = computed(() => {
    return state.loadOk
})
// 页面数据加载完成后同步执行init方法
let loadResolve
const loadPro = new Promise((resolve) => {
    loadResolve = resolve
})
watch(loadOk, async (value) => {
    if (value) {
        await nextTick()
        workspace.value.$el.addEventListener('drop', onDrap, false)
        handler.value = canvasRef.value?.handler
        canvas.value = handler.value.canvas
        loadResolve()
    }
})
onMounted(async () => {
    dispatch('getMaterial')
})

function onDrap(e) {
    if (e.dataTransfer.getData('item')) {
        let data = JSON.parse(e.dataTransfer.getData('item'))
        const { layerX, layerY } = e
        const pointerVpt = handler.value.canvas.restorePointerVpt({
            x: layerX,
            y: layerY
        })
        const item = {
            option: {
                name: data.templateName,
                type: data.type,
                data,
                src: data.url || data.src,
                left: pointerVpt.x,
                top: pointerVpt.y
            }
        }
        if (data.width && data.height) {
            item.option.width = data.width
            item.option.height = data.height
        }
        let options = Object.assign({}, item)
        onAddItem(options)
    }
}

function onAddItem(item) {
    const id = uuidv4()
    const option = Object.assign({}, item.option, { id })
    commit('setCurrentItem', option)
    handler.value.add(option)
}

function onAdd(target) {
    commit('setActivateItem', target)
    commit('setCurrentItem', target)
    handler.value.select(target)
}

function onSelect(target) {
    if (target && target.id) {
        // if (this.selectedItem && target.id === this.selectedItem.id) {
        //     return;
        // }

        commit('setActivateItem', target)
        return
    }
    commit('setActivateItem', null)
}
// 初始化完成后执行的逻辑
async function init() {
    await loadPro
    commit('setWorkarea', handler.value?.workareaHandler.workspace)
    await nextTick()
    workspace.value.initRuleRange()
}

function onChange(selectedItem, changedValues) {
    handler.value.set(selectedItem, changedValues)
}
</script>
<style lang="scss" scoped>
.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>
